<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css"
    />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="app"></div>
    <template id="t1">
      <div>
        <h1>待办事项</h1>
        <div class="input-group my-3">
          <input
            type="text"
            class="form-control"
            placeholder="输入标题"
            v-model="title"
          />
          <button
            class="btn btn-primary"
            type="button"
            :disabled="title===''"
            @click="add"
          >
            添加
          </button>
        </div>

        <div>
          <button
            class="btn btn-info"
            @click="query(0)"
            :disabled="activeStatus===0"
          >
            全部
          </button>
          <button
            class="btn btn-warning"
            @click="query(1)"
            :disabled="activeStatus===1"
          >
            未完成
          </button>
          <button
            class="btn btn-primary"
            @click="query(2)"
            :disabled="activeStatus===2"
          >
            进行中
          </button>
          <button
            class="btn btn-success"
            @click="query(3)"
            :disabled="activeStatus===3"
          >
            已完成
          </button>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>标题</th>
              <th>状态</th>
              <th>状态切换</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 使用模板展示数据 -->
            <tr
              v-for=" li in lists"
              :key="li.id"
              :class="statusStyle[li.status]"
            >
              <td>{{li.title}}</td>
              <td>{{status[li.status]}}</td>
              <td>
                <button
                  v-show="li.status!==1"
                  class="btn btn-warning"
                  @click="update(li.id,1)"
                >
                  未完成
                </button>
                <button
                  v-show="li.status!==2"
                  class="btn btn-primary"
                  @click="update(li.id,2)"
                >
                  进行中
                </button>
                <button
                  v-show="li.status!==3"
                  class="btn btn-success"
                  @click="update(li.id,3)"
                >
                  已完成
                </button>
              </td>
              <td>
                <button type="button" class="btn btn-link" @click="del(li.id)">
                  <i class="fas fa-trash-alt"></i> 删除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    <script src="./vue.js"></script>
    <script type="module">
      import {
        getTodoListsApi,
        addTodoApi,
        deleteTodoApi,
        updateTodoApi,
      } from "./api/todo.js";
      /*
        1. 获取数据（xhr）
          ① 数据接口API
          ② 接口参数
          ③ 返回值（接口响应数据）
        2. 展示数据
          ① API 返回值，保存到data对象属性中
          ② 使用模板展示数据
          ③ 对特定数据格式化、数据转换、样式调整
        3. 添加数据
          ① 收集数据
          ② 传数据调用接口添加数据 "参照 1"
          ③ 刷新页面(重新获取后端数据)
          ④ 清理页面
        4. 删除数据
          ① 收集数据，删除那一条数据
          ② 传数据调用接口删除数据 "参照 1"
          ③ 刷新页面(重新获取后端数据)
        5. 更新数据（局部修改状态）
          ① 收集数据，修改那一条数据
          ② 传数据调用接口修改数据 "参照 1"
          ③ 刷新页面(重新获取后端数据)
      */
      const baseURL = "http://127.0.0.1:3000";
      new Vue({
        el: "#app",
        template: "#t1",
        data: {
          activeStatus: 0, //记录状态过滤条件
          title: "",
          statusStyle: {
            1: "table-warning",
            2: "table-primary",
            3: "table-success",
          },
          status: { 1: "未完成", 2: "进行中", 3: "已完成" },
          lists: [], // 初始化数据
        },
        async created() {
          const data = await getTodoListsApi();
          this.lists = data;
        },
        methods: {
          async query(status = 0) {
            // 缓存过滤条件，用于视图按钮判断
            this.activeStatus = status;
            if (status === 0) {
              const data = await getTodoListsApi();
              this.lists = data;
            } else {
              const data = await getTodoListsApi({ status });
              this.lists = data;
            }
          },
          async update(id, status) {
            await updateTodoApi(id, { status });
            this.query();
          },
          async del(id) {
            if (confirm("确定删除？") === false) return;
            await deleteTodoApi(id);
            this.query();
          },
          async add() {
            // 判断输入内容不为空
            if (this.title === "") return;
            await addTodoApi({ title: this.title, status: 1 });
            this.query();
            this.title = "";
          },
        },
      });
    </script>
  </body>
</html>
